<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQury.js"></script>
    <style>
        a button{
            height: 100px;
            width: 200px;
        }
        
        .formBox{

            background-color: aqua;
            border: 3px brown solid;
            text-align: center;
            display: flex;



            margin:0px auto;
        }
        .TopBox{

                background-color: aqua;
                border: 3px brown solid;
                text-align: center;
                display: flex;



                margin:0px auto;
                }
        .addform{

            
        }



    </style>
   <script>  
   $(function(){
     // 获取表单元素  
     const form = document.getElementById('myForm'); 
      
      // 添加提交事件处理函数  
      form.addEventListener('submit', function(event) {  
        event.preventDefault(); // 阻止表单默认提交行为  
        
        // 获取表单数据，这里使用jQuery的serialize()方法将表单数据序列化为URL编码的字符串  
        const formData = $(form).serialize();  
        
        // 设置跳转目标URL，这里假设后台处理表单数据的URL为'/submit-form'  
        const redirectUrl = 'file:///F:/typora-root/Typora/%E5%8D%9A%E5%AE%A2%E7%AC%94%E8%AE%B0/vue-qianduan/index.html'; // 初始页面的URL  
        
        // 使用AJAX发送表单数据到后台处理，并获取响应数据  
        $.ajax({  
          type: 'POST', // 使用POST方法提交表单数据  
          url: 'http://127.0.0.1:5000/add', // 后台处理表单数据的URL  
          data: formData, // 将表单数据作为请求体发送  
          success: function(response) {  
            // 处理从后台传来的响应数据，这里假设响应数据是一个JSON对象  
            console.log(response); // 在控制台输出响应数据  
        
            // 跳转到初始页面  
            window.location.href = redirectUrl; // 设置跳转目标URL为初始页面的URL  
          },  
          error: function(xhr, status, error) {  
            // 处理请求错误情况，这里可以在控制台输出错误信息进行调试  
            console.error('Error:', error); // 在控制台输出错误信息  
          }  
        });  
      });  









   })
   
    </script>
</head>
<body>
    <div class="TopBox">
    <div class="formBox">
    
    <form id="myForm" class="addForm" action="http://127.0.0.1:5000/add" method="post">
         
        书名：<input type="text" name="name"><br>
        
        价格：<input type="text" name="price"><br>
        
        描述：<input type="text" name="summary"><br>
        <input type="submit" value="提交">

    </form>
    <iframe name="form" id="form" style="display:none"></iframe>
</div>
<div>
    <a href="file:///F:/typora-root/Typora/%E5%8D%9A%E5%AE%A2%E7%AC%94%E8%AE%B0/vue-qianduan/index.html"><button>返回初始页面</button></a>
    </div>
</div>
</body>
</html>